import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  DeviceInfo,
  BackHandler,
  TouchableOpacity,
} from 'react-native';
import NavigationUtil from '../navigator/NavigationUtil';
import ViewUtil from '../util/ViewUtil';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import NavigationBar from '../common/NavigationBar';
import {WebView} from 'react-native-webview';

const TRENDING_URL = 'https://github.com/';
export default class DetailPage extends Component {
  static navigationOptions = {
    title: '详情',
  };
  constructor(props) {
    super(props);
    this.params = this.props.navigation.state.params;
    const {projectModes, favoriteDao} = this.params;
    this.url =
      projectModes.item.html_url || TRENDING_URL + projectModes.item.fullName;
    const title = projectModes.item.full_name || projectModes.item.fullName;
    this.state = {
      title: title,
      url: this.url,
      canGoBack: false,
      isFavorite: projectModes.isFavorite,
    };
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
  }

  onBackPress() {
    this.onBack();
    return true;
  }

  onBack() {
    if (this.state.canGoBack) {
      this.webView.goBack();
    } else {
      NavigationUtil.goBack(this.props.navigation);
    }
  }

  onFavoriteButtonClick() {
    const {projectModes, favoriteDao, callback} = this.params;
    const isFavorite = (projectModes.isFavorite = !projectModes.isFavorite);
    callback(isFavorite); //更新item的收藏状态
    this.setState({
      isFavorite: isFavorite,
    });
    let key = projectModes.item.fullName
      ? projectModes.item.fullName
      : projectModes.item.id.toString();
    if (projectModes.isFavorite) {
      favoriteDao.saveFavoriteItem(key, JSON.stringify(projectModes));
    } else {
      favoriteDao.removeFavoriteItem(key);
    }
  }

  renderRightButton() {
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity onPress={() => this.onFavoriteButtonClick()}>
          <FontAwesome
            name={this.state.isFavorite ? 'star' : 'star-o'}
            size={20}
            style={{color: 'white', marginRight: 10}}
          />
        </TouchableOpacity>
        {ViewUtil.getShareButton(() => {})}
      </View>
    );
  }

  onNavigationStateChange(navState) {
    this.setState({
      canGoBack: navState.canGoBack,
      url: navState.url,
    });
  }
  render() {
    const {theme} = this.params;
    // //调整导航栏文字过多
    const titleLayoutStyle =
      this.state.title.length > 20 ? {paddingRight: 30} : null;
    let statusbBar = {
      backgroundColor: '#678',
      barStyle: 'light-content',
    };
    let navigationBar = (
      <NavigationBar
        leftButton={ViewUtil.getLeftBackButton(() => this.onBack())}
        titleLayoutStyle={titleLayoutStyle}
        title={this.state.title}
        statusbBar={statusbBar}
        style={theme.styles.navBar}
        rightButton={this.renderRightButton()}
      />
    );
    return (
      <View style={styles.container}>
        {navigationBar}
        <WebView
          ref={webView => (this.webView = webView)}
          startInLoadingState={true}
          onNavigationStateChange={e => this.onNavigationStateChange(e)}
          source={{uri: this.state.url}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: DeviceInfo.isIPhoneX_deprecated ? 0 : 0,
  },
});
